<script setup>
import { getSettingList, activateSetting, delSettings } from '@/api/system/setting'
import { downloadFile } from '@/api/subject/subject'

import AddSettingDlg from './components/NewAdd'
const { proxy } = getCurrentInstance()
const showSearch = ref(true)
const loading = ref(true)
const settingList = ref([])
const total = ref(0)

const queryParams = ref({
  pageNum: 1,
  pageSize: 10
})
const handleAdd = () => {
  proxy.$refs.addDlg.open()
}
const getList = () => {
  loading.value = true
  getSettingList(queryParams.value).then(response => {
    settingList.value = response.rows
    total.value = response.total
    loading.value = false
  })
}
onMounted(() => {
  getList()
})
const handleDelete = (row) => {
  const params = {
    id: row.id,
    loginImage: row.loginImage
  }
  if (row.isActive === 1) {
    return proxy.$message.warning('配置激活中,无法删除')
  }
  proxy.$modal.confirm('是否确认删除?').then(function () {
    return delSettings(params)
  }).then(() => {
    getList()
    proxy.$modal.msgSuccess('删除成功')
  }).catch(() => {})
}
const handleActive = async (row) => {
  const params = {
    id: row.id
  }
  proxy.$modal.confirm('是否确认激活该配置?').then(function () {
    return activateSetting(params)
  }).then(() => {
    getList()
    proxy.$message.success('激活成功')
  }).catch(() => {})
}
const handleSuccess = () => {
  getList()
}
const previewImage = (fileName) => {
  return new Promise((resolve, reject) => {
    const params = {
      workType: '',
      fileName
    }
    downloadFile(params).then(res => {
      resolve(res.url)
    }).catch((err) => {
      console.log('下载失败:' + err)
    })
  })
}
const preview = (file) => {
  previewImage(file).then(url => {
    proxy.viewerApi({
      options: {
        inline: true,
        button: true, // 右上角按钮
        navbar: true, // 底部缩略图
        title: true, // 当前图片标题
        toolbar: {
          zoomIn: true,
          zoomOut: true,
          oneToOne: false,
          reset: true,
          prev: false,
          play: {
            show: true,
            size: 'large'
          },
          next: false,
          rotateLeft: true,
          rotateRight: true,
          flipHorizontal: true,
          flipVertical: true
        }, // 底部工具栏
        tooltip: true, // 显示缩放百分比
        movable: true, // 是否可以移动
        zoomable: true, // 是否可以缩放
        rotatable: true, // 是否可旋转
        scalable: true, // 是否可翻转
        transition: true, // 使用 CSS3 过度
        fullscreen: true, // 播放时是否全屏
        keyboard: true // 是否支持键盘
      },
      images: [url]
    })
  })
}
</script>

<template>
  <div class="app-container">
    <el-row
      :gutter="10"
      class="mb8"
    >
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="plus"
          @click="handleAdd"
        >
          新增
        </el-button>
      </el-col>
      <right-toolbar
        v-model:showSearch="showSearch"
        @query-table="getList"
      />
    </el-row>
    <el-table
      ref="logininforRef"
      v-loading="loading"
      :data="settingList"
    >
      <el-table-column
        label="登录标题"
        align="center"
        prop="loginTitle"
      />
      <el-table-column
        label="登录图片"
        align="center"
        prop="loginImage"
      >
        <template #default="scope">
          <el-link
            type="primary"
            @click="preview(scope.row.loginImage)"
          >
            {{ scope.row.loginImage }}
          </el-link>
        </template>
      </el-table-column>
      <el-table-column
        label="是否激活"
        align="center"
        prop="isActive"
      >
        <template #default="scope">
          <el-tag :type=" scope.row.isActive ? 'primary' : 'warning'">
            {{ scope.row.isActive ? '已激活' : '未激活' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        prop="opt"
      >
        <template #default="scope">
          <el-button
            link
            type="primary"
            icon="CircleCheckFilled"
            @click="handleActive(scope.row)"
          >
            激活
          </el-button>
          <el-button
            link
            type="danger"
            icon="Delete"
            @click="handleDelete(scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
    <AddSettingDlg
      ref="addDlg"
      @on-success="handleSuccess"
    />
  </div>
</template>

<style scoped lang="scss">

</style>
